@duration: 3s;
@w: 36px;
.circle {
  width: @w;
  height: @w;
  border-radius: @w;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0px - @w / 2;
  margin-left: 0px - @w / 2;
  background: #000;
  animation-duration: @duration;
  animation-iteration-count: infinite;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &.active {
    .viewBox {
      animation-play-state: running;
    }
    .g1 {
      animation-play-state: running;
    }
    .g2 {
      animation-play-state: running;
    }
  }
}
.viewBox {
  width: 100%;
  height: 100%;
  position: relative;
  animation-play-state: paused;
  animation-name: y_animate;
  animation-duration: @duration * 2;
  animation-iteration-count: infinite;
}

.g0 {
  .circle;
  width: @w * 0.4;
  height: @w;
  margin-top: 0px - @w * 0.5;
  margin-left: 0px - @w * 0.2;
  background: #809467;
}
.g1 {
  .circle;
  background: #809467;
  animation-play-state: paused;
  animation-name: g1_animate;
}
.g2 {
  .circle;
  background: #9b967c;
  animation-play-state: paused;
  animation-name: g2_animate;
}

@keyframes g1_animate {
  0% {
    transform: translate(0px, 0px) scale(0.8);
  }
  10% {
    transform: translate(0px, 0px) scale(0.8);
  }
  15% {
    transform: translate(0px, -12px) scale(0.8);
  }
  25% {
    transform: translate(0px, 12px) scale(0.8);
  }
  35% {
    transform: translate(0px, -16px) scale(0.8);
  }
  45% {
    transform: translate(0px, 16px) scale(0.8);
  }
  55% {
    transform: translate(0px, -22px) scale(0.8);
  }
  65% {
    transform: translate(0px, 22px) scale(0.8);
  }
  75% {
    transform: translate(0px, -28px) scale(0.8);
  }
  85% {
    transform: translate(0px, 28px) scale(0.8);
  }
  90% {
    transform: translate(0px, 0px) scale(0.8);
  }
  100% {
    transform: translate(0px, 0px) scale(0.8);
  }
}
@keyframes g2_animate {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  10% {
    transform: translate(0px, 0px) scale(1);
  }
  15% {
    transform: translate(0px, 12px) scale(1);
  }
  25% {
    transform: translate(0px, -12px) scale(1);
  }
  35% {
    transform: translate(0px, 16px) scale(1);
  }
  45% {
    transform: translate(0px, -16px) scale(1);
  }
  55% {
    transform: translate(0px, 22px) scale(1);
  }
  65% {
    transform: translate(0px, -22px) scale(1);
  }
  75% {
    transform: translate(0px, 28px) scale(1);
  }
  85% {
    transform: translate(0px, -28px) scale(1);
  }
  90% {
    transform: translate(0px, 0px) scale(1);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes y_animate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  51% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
